<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script language="javascript" type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            //获取参数
            var params = getParams();
            //发送请求获取大攻略信息
            $.get("/strategies/" + params.id, function (data) {
                //填充攻略标题
                $(".title").html(data.title);

            });
            //发送请求查询攻略目录(文章也查询出来)
            $.get("/strategies/" + params.id + "/catalogs", function (data) {
                var index = 1;
                //数据渲染
                $(".catalogs").renderValues({list: data}, {
                    getName: function (item, value) {
                        $(item).html((index++) + "/" + value)
                    },
                    getHref: getHref
                })
            });

            //发送请求查询出所有推荐游记(周推荐 月推荐 攻略推荐)
            $.get("/travels/commends", {type: -1}, function (data) {
                //渲染数据
                $(".hot").renderValues(data, {
                    getHref: getHref
                });
            });


            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储游记的数组容器
            var travelData = [];

            //查询方fa
            function query() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                $.get("/strategies/" + params.id + "/commends", {strategyId:params.id,currentPage: currentPage}, function (data) {
                    //把查询的数据放到容器中
                    $.merge(travelData, data.list);
                    //将容器封装到属性为list的对象中
                    var json = {list: travelData};

                    //渲染数据
                    $("#comment").renderValues(json, {
                        getHref: getHref,
                        getStar: function (item, value) {
                            //拼接星星
                            var temp = "";
                            //填充的星星数 点评  实心
                            for (var i = 0; i < value; i++) {
                                temp += '<i class="fa fa-star"></i>';
                            }
                            //空心
                            for (var i = 0; i < 5 - value; i++) {
                                temp += '<i class="fa fa-star-o"></i>';
                            }
                            //选择 拼接
                            $(item).html(temp);
                        },
                        getCommentHref:function (item, value) {
                            var url = $(item).data("url");
                            $(item).attr("data-url",url+value);
                        },
                        getCommentId:function (item, value) {
                            $(item).attr("data-cid",value);  //渲染时在点赞按钮上绑定评论的id
                            $(item).attr("data-like",value); //data-like绑定的值和评论id一致,用于计数

                        }
                    })

                    /**查询绑定点赞按钮状态 ckw**/
                    var user = JSON.parse(sessionStorage.getItem("user"));
                    if(user){
                        $.get("strategyCommentLike/getAllStatusByLikerId?likerId="+user.id,function (data) {
                            $.each(data,function (index,ele) {
                                $("span[data-cid='"+ele+"']").html('<i class="fa fa-2x fa-thumbs-up" style="color: red"></i>');
                            })
                        });
                    }



                    //给图标绑定点击事件 弹窗放大
                    $(".comment-img img").click(function () {
                        var url = $(this).attr("src");
                        $(document).dialog({
                            titleShow: false,
                            content: '<img src="' + url + '" width="100%">'
                        });
                    });
                    //给评论二级按钮绑定点击事件
                    $(".icon a").click(function () {
                        var url = $(this).data("url");
                        var user = sessionStorage.getItem("user");

                        if(user){
                            window.location.href=url;
                        }else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,要评论请先登录',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            setTimeout(function () {
                                window.location.href="/login.html";
                            },1500)
                        }
                    });



                    /** 给点赞按钮绑定点击事件 ckw**/
                    $(".likeBtn").click(function () {
                        var click = $(this);
                        var likerId = null;     //默认是无登录状态
                        var commentId = click.data("cid");
                        var user = JSON.parse(sessionStorage.getItem("user"));
                        if(user){
                            likerId = user.id;
                            var thumb = click.find("i").attr("class").split(" ");
                            //如果是未点赞状态,就发请求添加点赞记录
                            if(thumb[2] == "fa-thumbs-o-up"){
                                $.post("strategyCommentLike/add",{commentId:commentId,likerId:likerId},function (data) {
                                    if(data.success){
                                        click.find("i").removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                                        click.find("i").css("color","red");
                                    }
                                })
                                //否则删除该条点赞记录
                            }else {
                                $.post("strategyCommentLike/delete",{commentId:commentId,likerId:likerId},function (data) {
                                    if(data.success){
                                        click.find("i").css("color","black");
                                        click.find("i").removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                                    }
                                })
                            }
                        }else{
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,要评论请先登录',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            setTimeout(function () {
                                window.location.href="/login.html";
                            },1500)
                        }


                    })


                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;

                })
            }

            //默认查询第一页
            query();


            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });


            //点评按钮
            $("#commentBtn").click(function () {
                window.location.href = "/mine/addComment.html?id=" + params.id;
            })

            //收藏功能
            //当前收藏数
            var collectNum;
            //查找当前攻略的收藏数量
            $.get("collect/strategy/count",{strategyId:params.id},function(data){
                collectNum = data;
                $("#collectNum").html(collectNum);
                console.log(data);
            })
            //设置收藏数量
            //设置默认的收藏状态
            var status;
            //获取当前登录用户
            var user= JSON.parse(sessionStorage.getItem("user"));
            $.get("collect/strategy",{userId:user.id ,strategyId:params.id},function(data){
                status = data;

            })
            //绑定点击事件
            $(".fa-heart").click(function () {
                //判断当前用户是否登录
                if (user != null){

                    if(status){
                        //发送ajax请求,删除对应的关系
                        $.ajax({
                            url:"collect/strategy",
                            method:"post",
                            data:{
                                _method : "delete",
                                userId : user.id,
                                strategyId : params.id
                            },
                            dataType:"json",
                            success : function (data) {
                                status = false;
                                $("#collectNum").html(collectNum);
                                $(document).dialog({
                                    type : 'toast',
                                    infoIcon: '../imager/fail.png',
                                    infoText: '取消收藏',
                                    autoClose: 2500
                                });
                            }

                        })
                    }else {
                        //发送ajax请求,保存对应的关系
                        $.ajax({
                            url:"collect/strategy",
                            method:"post",
                            data:{
                                userId : user.id,
                                strategyId : params.id
                            },
                            dataType:"json",
                            success : function (data) {
                                $("#collectNum").html(collectNum+1);
                                status = true;
                                $(document).dialog({
                                    type : 'toast',
                                    infoIcon: '../imager/success.png',
                                    infoText: '关注收藏',
                                    autoClose: 2500
                                });
                            }
                        })
                    }

                }else
                {
                    //未登录跳转到登录页面  
                    window.location.href = "login.html";
                }
            })
            var val = 0;
            $.get("strategyCommentLike/getStrategyLikeByStrategyId?strategyId="+params.id,function (data) {
                $("#like").find("span").html(data);
                val = data;
            })

            /** 给大攻略的点赞按钮绑定点击事件**/
            var flag = false; //是否已点击过
            $("#like").click(function () {

                if(flag){
                    $(document).dialog({
                        type: 'notice',
                        infoText: '亲,你已经赞过了',
                        autoClose: 1500,
                        position: 'center'  // center: 居中; bottom: 底部
                    })
                }else {
                    var count = val + 1;
                    $(this).find("span").html(count);
                    flag = true;
                }

            })



            //我的旅行单操作

            //获取当前登录的
            var user = JSON.parse(sessionStorage.getItem("user"));
            //定义一个状态的变量
            var type;
            //获取当前用户的旅行状态
            $.get("mytraveltable",{strategyId:params.id, userId:user.id},function (data) {
                type = data;
                console.log(data);
                if (data){
                    $("#joinTravelBtn").html("").html("已添加旅行单")

                }else{
                    $("#joinTravelBtn").html("").html("添加到旅行单")
                }
            })
            //给加入旅行单添加点击事件
            $("#joinTravelBtn").click(function () {
                if(type){
                    $.ajax({
                        url:"mytraveltable",
                        method:"post",
                        data:{
                             _method : "delete",
                            userId : user.id,
                            strategyId : params.id
                        },
                        dataType:"json",
                        success : function (data) {
                            //修改状态为可保存状态
                            type = false;
                            //当取消成功之后,改变为添加到旅行单
                            $("#joinTravelBtn").html("").html("添加到旅行单")
                            var toast5 = $(document).dialog({
                                type : 'toast',
                                infoIcon: '../imager/loading.gif',
                                infoText: '正在加载中',
                            });
                            setTimeout(function () {
                                toast5.update({
                                    infoIcon: '../imager/fail.png',
                                    infoText: '取消成功',
                                    autoClose: 1500,
                                });
                            }, 1500);
                        }
                    })

                }else{
                    //显示日期选择页面
                    $('#myModal').modal('show');
                    //给确定按钮绑定点击事件
                    $('.modal-footer .btn-primary').click(function () {
                    $.ajax({
                        url:"mytraveltable",
                        method:"post",
                        data:{
                            userId : user.id,
                            'strategy.id' : params.id,
                            travelTime : $("#dateBtn").val(),
                            travelStatus : 1
                        },
                        dataType:"json",
                        success : function (data) {
                            //改变状态为可以取消的状态
                            var type = true;
                            //当添加成功之后,改变为已添加
                            $("#joinTravelBtn").html("").html("已添加旅行单")
                            var toast5 = $(document).dialog({
                                type : 'toast',
                                infoIcon: '../imager/loading.gif',
                                infoText: '正在加载中',
                            });
                            setTimeout(function () {
                                toast5.update({
                                    infoIcon: '../imager/success.png',
                                    infoText: '添加成功',
                                    autoClose: 1500,
                                });
                                window.location.reload();
                            }, 1500);
                        }
                    })
                    });
                }



            });

        });
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title"></h5><!--当前攻略目录名称-->
    <small><span>0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa fa-heart fa-lg"><span id="collectNum"> 0</span> 收藏</i>&nbsp;&nbsp;&nbsp;&nbsp;
        <i class="fa fa-thumbs-up fa-lg" id="like"><span > 0</span> 点赞</i>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>

<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">

        <div class="container hot">
            <h6>大家都在看</h6>
            <div render-loop="list">
                <a render-fun="getHref" render-key="list.travelId" data-url="/travelContent.html?id=">
                    <button class="btn" render-html="list.title"></button>
                </a>
            </div>
        </div>

        <div class="catalogs">
            <div render-loop="list">
                <div class="container detail">
                    <h6 render-fun="getName" render-key="list.name"></h6>
                    <div render-loop="list.details">
                        <a render-fun="getHref" render-key="list.details.id" data-url="/strategyDetails.html?id=">
                            <button class="btn" render-html="list.details.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div>
                <span>价格便宜</span>
                <span>很热闹</span>
                <span>交通方便</span>
                <span>吃的很多</span>
                <span>风景优美</span>
                <span>美食很多</span>
                <span>很特别</span>
                <span>爱上这座城</span>
                <span>住宿方便</span>
                <span>刚刚</span>
            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a id="userHref" render-fun="getHref" render-key="list.user.id"
                           data-url="/userProfiles.html?id=">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.user.nickName"></span></p>
                        <span class="comment-star" render-fun="getStar" render-key="list.starNum">
                        </span>
                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <a href="/strategyComment.html">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img" render-loop="list.imgArr">
                            <li>
                                <img render-src="list.imgArr.self">
                            </li>
                        </ul>

                        <div class="d-flex icon">
                            <a data-url="/mine/strategyComment.html?id=" render-fun="getCommentHref" render-key="list.id">
                                <i class="fa  fa-commenting-o fa-lg " style="margin-right: 10px"> 评论 </i>
                            </a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="likeBtn" render-key="list.id" render-fun="getCommentId" >
                                <i class="fa fa-2x fa-thumbs-o-up" ></i>
                            </span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<div class="operation">
    <button class="btn" id="joinTravelBtn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


    <!--my97出行日期模态框-->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">请选择出行时间</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <!--日历插件-->
                    <input id="dateBtn" type="text" class="Wdate" id="occurDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', minDate:'%y-%M-{%d+1}', readOnly:true})" value = "${occurdate}" style="background-color:#e4e4e4;; height:65%; width:100%"></input>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>